* {
	padding: 0;
	margin: 0;
	font-family: "微软雅黑";
}

body {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	position: relative;
	width: 100vw;
	height: 100vh;
	background: url(../img/bg.jpg)no-repeat 0 0;
	background-size: 100% 100%;
}

.main {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	padding: 2vw;
}


.right {
	flex: none;
	margin-left: 2vw;
	width: 20vw;
	height: 100%;
}

.left {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-flex: 1.0;
	flex: 1.0;
	height: 100%;
	background-color: rgba(255,255,255,0.5);
	padding: 1.5vw;
	position: relative;
}
.left .ul-box{
	display: none;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
#msg{
	display: block;
}
.left ul{
	display: block;
	width: 100%;
}
#msg ul li{
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	display: none;
	padding: 1.5vw;
	width: 100%;
	min-height: 100px;
	background-color: #fff;
	margin-bottom: 1.5vw;
}
#msg ul li .head{
	width: 100%;
	height: 8vw;
}
.imgbox{
	float: left;
	position: relative;
	width: 6vw;
	height: 6vw;
	overflow: hidden;
	border-radius: 100%;
}
.imgbox img{
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	max-width: 100%;
	max-height: 100%;
}
.name{
	float: left;
	font-size: 2.5vw;
	line-height: 6vw;
	margin-left: 1vw;
}
.time{
	float: right;
	margin-right: 1vw;
	color: #aaa;
	font-size: 2vw;
	line-height: 6vw;
}
#msg ul li .content{
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	padding: 1.5vw;
	font-size: 2.3vw;
	color: #fff;
	text-align: justify;
	background-color: #3085CA;
	width: 100%;
	word-wrap: break-word;
	border-radius: 10px;
}
.content img{
	display: block;
	max-width: 50%;
}
#msg ul li:last-child{
	margin-bottom: 0;
}

#result{
	/*display: block;*/
}
.results{
	position: relative;
	width: 100%;
	height: 100%;
	background-color: #fff;
}
.results p{
	text-align: center;
	height: 7vw;
	line-height: 7vw;
	font-size: 2.8vw;
}
.results p:nth-child(2){
	height: 5vw;
	line-height: 5vw;
	font-size: 2.5vw;
}

#result ul{
	position: absolute;
	display: block;
	top: 7vw;
	bottom: 5vw;
	height: auto;
}
#result ul li{
	position: relative;
	display: block;
	float: left;
	width: 25%;
	height: 100%;
}
#result ul li span{
	position: absolute;
	bottom: 0;
	display: block;
	width: 100%;
	height: 4vw;
	line-height: 4vw;
	font-size: 2.2vw;
	text-align: center;
}
#result ul li .meter{
	position: absolute;
	bottom: 6vw;
	top: 5vw;
	left: 0;
	right: 0;
	width: 30%;
	height: auto;
	margin: 0 auto;
	background-color: #eee;
}
#result ul li .meter .value{
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	max-height: 100%;
	height: 0;
	width: 100%;
	background-color: #1377C7;
}

#gameresult{
	/*display: block;*/
}
#gameresult ul{
	position: absolute;
	top: 12vw;
	bottom: 0;
	height: auto;
	width: 100%;
}
#gameresult ul li{
	position: relative;
	display: block;
	width: 90%;
	height: 8vh;
	line-height: 8vh;
	margin: 3vh auto;
}
#gameresult ul li span{
	float: left;
	display: block;
	font-size: 2.1vw;
	margin-right: 1.5vw;
	line-height: 8vh;
}
#gameresult ul li .imgbox{
	width: 8vh;
	height: 8vh;
}
#gameresult ul li .name{
	font-size: 2.5vw;
	line-height: 8vh;
	margin-left: 1.5vw;
}
#gameresult ul li .time{
	font-size: 2vw;
	line-height: 8vh;
}
.code{
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	width: 20vw;
	height: 20vw;
	background-color: #fff;
}
.code img{
	display: block;
	border: none;
	width: 100%;
	height: 100%;
}
.cn{
	text-align: center;
	width: 100%;
	height: 3.5vw;
	line-height: 3.5vw;
	font-size: 1.7vw;
	color: #fff;
	background-color: rgba(0,0,0,0.2);
}
.after:after {
	content: "";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
#result .num{
	position: absolute;
	top: 1vw;
	width: 100%;
	height: 4vw;
	line-height: 4vw;
	font-size: 1.8vw;
	text-align: center;
}